<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>用户登录</title>
    <!-- Bootstrap CSS -->
	<link href="/static/bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="/static/bootstrap-5.3.3-dist/js/bootstrap.min.js"></script>
	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Loding font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">
    <!-- Custom Styles -->
    <link rel="stylesheet" type="text/css" href="/static/styles.css">
	<style>
        body{
            background-image: url('/static/images/img.png'); /* 设置背景图像 */
            background-size: cover; /* 使背景图像覆盖整个窗口 */
            background-position: center; /* 背景图像居中 */
        }
		.container {
			width: 450px;
			margin-top: 100px;
			box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
		}

		.col-lg-12 {
			padding: 15px;
		}
	</style>
</head>

<body>

	<div class="container">
		<div class="col-lg-12">
        <div class="login">
			<h1 class="text-center">用户登录</h1>
			<form id="login-form" method="post" role="form" style="display: block;">
                {% csrf_token %}
				<h4>用户名</h4>
				<div class="form-group">
					<input type="text" name="username" id="username" tabindex="2" class="form-control"
						placeholder="请输入用户名">
				</div>
				<h4>密码</h4>
				<div class="form-group">
					<input type="password" name="password" id="password" tabindex="2" class="form-control"
						placeholder="请输入密码">
				</div>
                <button type="submit" class="btn btn-primary btn-default">登录</button>
                {% if error %}
                <p>{{ error }}</p>
                    {% endif %}
            </form>
        </div>
		</div>
	</div>
</body>

</html>